<template>
    <div>
        <h2>G6 分组 与子图</h2>
        <div ref="container" style="width:100%;height:400px;background:#f5f5f5;"></div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
defineOptions({ name: 'AntvG6Demo4' });
import * as G6 from '@antv/g6';
const container = ref();
onMounted(() => {
    const graph = new G6.Graph({
        container: container.value,
        width: 600,
        height: 400,
        layout: { type: 'random' },
        data: {
            nodes: [
                { id: 'node1', label: '组1-节点1', x: 100, y: 100, cluster: 'group1' },
                { id: 'node2', label: '组1-节点2', x: 200, y: 100, cluster: 'group1' },
                { id: 'node3', label: '组2-节点1', x: 400, y: 200, cluster: 'group2' },
                { id: 'node4', label: '组2-节点2', x: 500, y: 200, cluster: 'group2' }
            ],
            edges: [
                { source: 'node1', target: 'node2' },
                { source: 'node3', target: 'node4' }
            ],
            // clusters: [
            //     { id: 'group1', label: '分组1' },
            //     { id: 'group2', label: '分组2' }
            // ]
        },
        behaviors: ['drag-canvas', 'drag-element'],
    });
    graph.render();
});
</script> 